昨天我們完成了 User Story & AC 的拆解，今天要進入視覺化的階段：UI/UX Design。

這是很多技術人（包括我）最頭痛的環節。我們擅長寫邏輯、設計架構、優化演算法，但對「好看」和「好用」常常沒什麼感覺。

BoltHQ 是一個 SaaS 平台，使用者第一眼看到的就是 UI，如果做得不專業，連試用的機會都沒有。
所以今天，我要讓 AI 成為我的 UI/UX Designer。

為什麼 UI/UX 這麼重要？

現實很殘酷

很多技術人會覺得：「功能做出來就好了，UI 隨便弄弄。」

但現實是：

好的功能 + 爛的 UI = 沒人用
普通的功能 + 好的 UI = 大家搶著用

更慘的是，在 SaaS 產品中：

使用者的第一印象（3 秒） = UI
使用者願不願意付費 = UX
技術有多厲害 = 看不到

然後筆者美感超差，以往真的都是 Design 不知道要怎麼做只能套套別人做好的樣板或是直接用 CSS Franwork Basic Component

好的 UI/UX 不只是好看

在前三個專案中，我漸漸理解到，好的 UI/UX 設計不只是「好看」，更重要的是：

1. 降低學習成本

• 使用者一看就懂，不用看說明
• 符合既有的心智模型
• 減少認知負荷

2. 提升轉換率

• 使用者願意註冊
• 使用者願意試用
• 使用者願意付費

3. 減少客服成本

• 清楚的引導，使用者不會迷路
• 明確的錯誤提示，使用者知道怎麼修正
• 一致的設計語言，使用者建立使用習慣

4. 建立品牌印象

• 專業的設計 = 可信賴的產品
• 一致的風格 = 用心的團隊
• 流暢的體驗 = 高品質的服務

不只 UI 要好，UX 也很重要！

創造第四個 AI 同事：UI/UX Designer

前三天我們已經有了：

• AI PM：寫 PRD
• AI BA：拆 User Stories
• AI Architect：技術規劃

今天要創造第四個 AI 同事：UI/UX Designer。

Claude Code Agent

使用 /agents 後可以把以下的 prompt 丟進去讓 CC 幫你生 Agents

你是一位資深的 UI/UX Designer，專門設計 B2B SaaS 產品。

背景資料：
- 讀取 docs/PRD.md
- 讀取 docs/USER_STORIES.md
- 產品是 AI-DLC Sprint 自動化平台
- 目標用戶是小團隊和獨立開發者
- 核心流程：Spec Input → PRD Generation → Story Decomposition → GitHub Sync

設計任務：
1. 資訊架構設計（Information Architecture）
2. 使用者流程圖（User Flow）
3. Wireframe 設計（低保真原型）
4. Design System 定義（設計系統）
5. Accessibility 檢查清單（無障礙設計）

設計原則：
- 專業且現代的 SaaS 風格
- 清晰的視覺層級
- 符合 Web 標準和最佳實踐
- 移動優先（Mobile-First）但重視桌面體驗
- 暗色模式支援

輸出格式：
請產出完整的設計文件，包含：
- 設計理念說明
- 完整的 Wireframe 描述
- 設計系統規範（顏色、字體、間距、元件）
- 互動設計細節
- 響應式設計策略

寫入 docs/UI_UX_DESIGN.md

AI Designer 的設計策略

AI 花了一些時間分析 PRD 和 User Stories，然後提出了設計策略。

核心設計挑戰

AI 首先識別出 BoltHQ 的三大設計挑戰：

挑戰 1：複雜流程的簡化

• 問題：Spec Input → PRD → Stories → GitHub，四個階段，每個階段都有複雜的互動
• 策略：用「步驟條」清楚標示進度，讓使用者知道自己在哪裡

挑戰 2：AI 對話的視覺化

• 問題：AI 提問釐清需求，如何讓對話不會看起來很亂？
• 策略：採用「對話卡片」設計，每個問答是一個獨立的卡片，可以展開/收合

挑戰 3：大量文字內容的可讀性

• 問題：PRD、User Stories 都是文字內容，如何避免「文字牆」？
• 策略：使用「可展開的區塊」+ 「語法高亮」+ 「預覽模式」

資訊架構設計

AI 提出了清晰的資訊架構：

BoltHQ
├── Landing Page（未登入）
│   ├── Hero Section（核心價值主張）
│   ├── How It Works（三步驟說明）
│   ├── Features（功能亮點）
│   └── CTA（開始使用）
│
├── Dashboard（已登入）
│   ├── Projects List（專案列表）
│   ├── Recent Activity（最近活動）
│   └── Quick Actions（快速操作）
│
├── Project Workspace（專案工作區）
│   ├── Spec Input（需求輸入）
│   │   ├── Initial Input（初始輸入）
│   │   ├── AI Clarification（AI 澄清對話）
│   │   └── Review & Edit（檢視與編輯）
│   │
│   ├── PRD View（PRD 檢視）
│   │   ├── PRD Preview（預覽模式）
│   │   ├── PRD Edit（編輯模式）
│   │   └── Export Options（匯出選項）
│   │
│   ├── Stories View（Stories 檢視）
│   │   ├── Stories List（Stories 列表）
│   │   ├── Story Detail（Story 詳情）
│   │   └── Story Editor（Story 編輯器）
│   │
│   └── GitHub Sync（GitHub 同步）
│       ├── Connection Status（連接狀態）
│       ├── Repo Settings（Repo 設定）
│       └── Sync History（同步歷史）
│
└── Settings（設定）
    ├── Profile（個人資料）
    ├── GitHub Integration（GitHub 整合）
    └── AI Agents Config（AI Agents 設定）

AI 的設計理念：

「讓使用者隨時知道自己在哪裡，下一步要做什麼，以及如何回到上一步。」

使用者流程設計

AI 為核心流程設計了詳細的使用者旅程。

流程 1：首次使用者的 Onboarding

1. Landing Page
   ↓ 點擊「Start Free Trial」
   
2. GitHub OAuth 授權
   ↓ 授權完成
   
3. Welcome Modal（歡迎視窗）
   - 顯示：「歡迎來到 BoltHQ！」
   - 說明：三步驟快速上手
   - CTA：「創建第一個專案」
   ↓ 點擊 CTA
   
4. 進入 Spec Input 頁面
   - 自動 Focus 到輸入框
   - 顯示範例提示
   - 提供「查看範例專案」選項

AI 的設計考量：

• 減少摩擦：GitHub OAuth 是必要的，所以放在最前面
• 建立期待：Welcome Modal 讓使用者知道接下來會發生什麼
• 提供信心：「查看範例專案」讓使用者可以先看看結果

流程 2：Spec Input → PRD Generation

1. Spec Input 頁面
   使用者輸入：「我想做一個任務管理 App」
   ↓ 點擊「開始分析」
   
2. Loading 狀態（3-5 秒）
   - 顯示動畫：「AI 正在分析你的需求...」
   - 顯示進度：分析關鍵字 → 識別領域 → 生成問題
   ↓ 分析完成
   
3. AI Clarification（對話介面）
   AI 問：「你的目標用戶是誰？」
   使用者答：「個人使用者和小團隊」
   
   AI 問：「核心功能優先順序是什麼？」
   使用者答：「任務建立和狀態管理最重要」
   
   ... 持續 3-5 輪對話
   ↓ 資訊收集完成
   
4. Confirmation Modal（確認視窗）
   - 顯示：「已收集足夠資訊！」
   - 摘要：顯示關鍵資訊摘要
   - CTA：「生成 PRD」
   ↓ 點擊 CTA
   
5. PRD Generation（生成中）
   - Loading：「AI 正在撰寫 PRD...」
   - 預計時間：約 30 秒
   ↓ 生成完成
   
6. PRD Preview 頁面
   - 顯示完整 PRD
   - 提供編輯功能
   - CTA：「拆解成 User Stories」

AI 的設計亮點：

• 即時回饋：每個步驟都有清楚的狀態提示
• 進度感知：使用者知道還要多久
• 可控性：使用者可以隨時編輯對話和結果

Wireframe 設計重點

AI 沒有直接畫圖（因為是文字輸出），但給了非常詳細的 Wireframe 描述。我挑幾個關鍵頁面說明：

頁面 1：Spec Input（需求輸入頁面）

版面配置：

┌─────────────────────────────────────────┐
│  [Logo] BoltHQ           [User Menu]   │ ← Header
├─────────────────────────────────────────┤
│                                         │
│  ┌───────────────────────────────────┐ │
│  │  Step 1 of 4: 描述你的專案想法   │ │ ← Progress Indicator
│  └───────────────────────────────────┘ │
│                                         │
│  ┌───────────────────────────────────┐ │
│  │  專案名稱                          │ │
│  │  [_____________________________]   │ │
│  │                                    │ │
│  │  描述你想做的產品                  │ │
│  │  ┌──────────────────────────────┐│ │
│  │  │                              ││ │
│  │  │  [輸入區域，高度自動調整]    ││ │
│  │  │                              ││ │
│  │  └──────────────────────────────┘│ │
│  │                                    │ │
│  │  💡 提示：至少 20 字，越詳細越好  │ │
│  │                                    │ │
│  │  [查看範例]          [開始分析 →] │ │
│  └───────────────────────────────────┘ │
│                                         │
└─────────────────────────────────────────┘

設計細節：

• 大大的輸入框：讓使用者不會覺得空間不夠
• 即時字數統計：顯示目前字數 / 建議字數
• 範例連結：點擊後彈出 Modal 顯示範例
• 按鈕狀態：不足 20 字時按鈕禁用並顯示原因

頁面 2：AI Clarification（AI 對話頁面）

版面配置：

┌─────────────────────────────────────────┐
│  [Logo] BoltHQ           [User Menu]   │
├─────────────────────────────────────────┤
│                                         │
│  ┌───────────────────────────────────┐ │
│  │  Step 2 of 4: AI 釐清需求        │ │
│  └───────────────────────────────────┘ │
│                                         │
│  ┌───────────────────────────────────┐ │ ← Conversation Area
│  │                                    │ │
│  │  🤖 AI: 你的目標用戶是誰？        │ │
│  │  ┌──────────────────────────────┐│ │
│  │  │ [輸入回答...]                ││ │
│  │  └──────────────────────────────┘│ │
│  │                                    │ │
│  │  ✓ 你: 個人使用者和小團隊         │ │ ← Answered
│  │     [編輯]                         │ │
│  │                                    │ │
│  │  🤖 AI: 核心功能優先順序？        │ │ ← Current
│  │  ┌──────────────────────────────┐│ │
│  │  │ [輸入回答...]                ││ │
│  │  └──────────────────────────────┘│ │
│  │                                    │ │
│  │  [回答] 或 [跳過這個問題]         │ │
│  └───────────────────────────────────┘ │
│                                         │
│  已回答 2 / 5 個問題                   │ ← Progress
│                                         │
└─────────────────────────────────────────┘

設計細節：

• 對話氣泡：AI 的問題用淺藍色，使用者的回答用白色
• 可編輯：已回答的問題可以點擊「編輯」修改
• 跳過選項：不是每個問題都必答
• 進度顯示：讓使用者知道大概還要回答幾個

頁面 3：PRD Preview（PRD 預覽頁面）

版面配置：

┌─────────────────────────────────────────┐
│  [Logo] BoltHQ           [User Menu]   │
├─────────────────────────────────────────┤
│  ┌─────────────────────────────────┐   │
│  │  Step 3 of 4: 檢視生成的 PRD   │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ┌──────────┬──────────────────────┐  │
│  │ 目錄     │  # 專案概述            │  │ ← Split View
│  │          │                        │  │
│  │ • 概述   │  BoltHQ 是一個...      │  │
│  │ • 用戶   │                        │  │
│  │ • 功能   │  ## 目標用戶           │  │
│  │ • 技術   │                        │  │
│  │ • 指標   │  1. 小團隊             │  │
│  │          │  2. 獨立開發者         │  │
│  │ [預覽]   │                        │  │
│  │ [編輯]   │  ## 核心功能           │  │
│  │ [匯出]   │                        │  │
│  │          │  ### P0 功能           │  │
│  │          │  - Spec Input          │  │
│  │          │  - PRD Generation      │  │
│  │          │  ...                   │  │
│  └──────────┴──────────────────────┘  │
│                                         │
│  [← 重新生成]     [確認並繼續 →]      │
│                                         │
└─────────────────────────────────────────┘

設計細節：

• Split View：左邊目錄，右邊內容，方便導航
• 預覽/編輯模式切換：預覽模式看排版，編輯模式改內容
• 即時保存：編輯時自動保存，不用擔心丟失
• 匯出選項：可以下載 Markdown 或 PDF

明天預告

明天（Day 5）終於要開始寫 code 了！

開發流程：

建立專案
    ↓
建立架構
    ↓
寫測試（Story #1 的 AC 1.1）
    ↓
實作元件
    ↓
測試通過
    ↓
繼續下一個 AC

結論

從 Day 1 到 Day 4：

• Day 1：需求釐清（知道要做什麼）
• Day 2：PRD 規劃（知道怎麼做）
• Day 3：User Stories（知道做哪些功能）
• Day 4：UI/UX Design（知道長什麼樣子）

四天的準備，換來什麼？

• ✅ 清晰的方向
• ✅ 詳細的規格
• ✅ 可執行的計畫
• ✅ 完整的設計藍圖

明天開始開發時，我不會迷路，因為：

• 知道要做什麼（PRD）
• 知道要驗收什麼（AC）
• 知道要長什麼樣（Design）
• 知道怎麼測試（TDD）

這就是 AI-DLC Sprint 的威力：

• 前期準備充分
• 開發過程順暢
• 品質有保證
• 速度夠快